<template>
  <div class="view-fill">
    <div class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        :title="title"
        @returnBack="$emit('returnModify')"
      >
        <template v-slot:full-button>
          <el-button @click="save()">保存</el-button>
        </template>
        <div class="model-panel">
          <div class="model-panel-title">
            <Tooltip text="基础信息" tips="作用于领用申请" />
          </div>
          <div class="model-panel-body">
            <!-- form -->
            <PageForm
              class="paddingBox order-model-formBox flex_wrap_start_start"
              v-model:ref-obj="formInfo.ref"
              :disabled="formInfo.disabled"
              :data="formInfo.data"
              :field-list="formInfo.fieldList"
              :rules="formInfo.rules"
              :label-width="formInfo.labelWidth"
            >
              <template v-slot:form-depotName>
                <el-input
                  v-model="formInfo.data.depotName"
                  class="not-mongolia"
                  type="input"
                  :required="true"
                  :disabled="true"
                  :placeholder="'请选择仓库'"
                >
                  <template #append>
                    <el-icon @click="checkDepotName"><MoreFilled /></el-icon>
                  </template>
                </el-input>
              </template>
              <template v-slot:form-productName>
                <el-input
                  v-model="formInfo.data.productName"
                  class="not-mongolia"
                  type="input"
                  :required="true"
                  :disabled="true"
                  :placeholder="'请选择产品'"
                >
                  <template #append>
                    <el-icon @click="changeProduct"><MoreFilled /></el-icon>
                  </template>
                </el-input>
              </template>
            </PageForm>
          </div>
        </div>
        <div class="model-panel">
          <div class="model-panel-title">
            <Tooltip text="库存信息" tips="作用于领用审核" />
          </div>
          <div class="model-panel-body">
            <!-- form -->
            <PageForm
              class="paddingBox order-model-formBox flex_wrap_start_start"
              v-model:ref-obj="formInfo.ref"
              :disabled="formInfo.disabled"
              :data="formInfo.data"
              :field-list="formInfo.fieldList2"
              :rules="formInfo.rules"
              :label-width="formInfo.labelWidth"
            >
              <template v-slot:form-supplierName>
                <el-input
                  v-model="formInfo.data.supplierName"
                  class="not-mongolia"
                  type="input"
                  :disabled="true"
                  placeholder="请选择供应商"
                >
                  <template #append>
                    <el-icon @click="openSupplierWindow"
                      ><MoreFilled
                    /></el-icon>
                  </template>
                </el-input>
              </template>
              <template v-slot:form-price="scope">
                <el-input-number
                  v-model.lazy="formInfo.data.price"
                  style="width: 100%"
                  clearable
                  controls-position="right"
                  :min="0"
                  :max="99999999"
                />
              </template>
            </PageForm>
          </div>
        </div>
      </NewFullScreen>
    </div>
    <!-- 选择仓库 -->
    <SelectDepot
      v-if="useDepotInfo.visible"
      v-model:show-dialog="useDepotInfo.visible"
      :check-box="false"
      :highlight-row="true"
      :query="useDepotInfo.query"
      :save-empty="true"
      @callback="callbackUseDepot"
    />
    <!-- 选择供应商 -->
    <SelectSupplier
      v-if="supplierInfo.visible"
      :check-box="false"
      :highlight-row="true"
      v-model:show-dialog="supplierInfo.visible"
      :query="supplierInfo.query"
      :saveEmpty="true"
      @callback="selectSupplierCallback"
    />
    <!-- 选择产品 -->
    <SelectProduct
      v-if="productInfo.visible"
      v-model:show-dialog="productInfo.visible"
      :query="productInfo.query"
      :checkBox="false"
      :highlightRow="true"
      @callback="selectProduct"
    />
  </div>
</template>

<script setup>
import {
  postDepotProductForbiddenConfig,
  putDepotProductForbiddenConfig,
  getDepotProductForbiddenConfigById,
} from '@/api/use'

const { proxy } = getCurrentInstance()
const props = defineProps(['visible', 'title', 'rowData'])
const emits = defineEmits()

const formRefs = ref([])
//表单相关
const formInfo = ref({
  ref: null,
  data: {
    status: 1,
  },
  fieldList: [
    {
      type: 'slot',
      label: '仓库',
      value: 'depotName',
    },
    {
      type: 'slot',
      label: '产品',
      value: 'productName',
      asValue: 'productId',
    },
    {
      label: '状态',
      value: 'status',
      type: 'radio-model',
      code: 'enabled_type',
    },
  ],
  fieldList2: [
    {
      type: 'slot',
      label: '供应商',
      value: 'supplierName',
    },
    {
      label: '生产批号',
      value: 'batchNumber',
      type: 'input',
    },
    {
      label: '生产日期',
      value: 'productionDate',
      type: 'date',
    },
    {
      label: '失效日期',
      value: 'validityDate',
      type: 'date',
    },
    {
      type: 'slot',
      label: '单价',
      value: 'price',
    },
    {
      label: '是否寄售',
      value: 'isConsignBusiness',
      type: 'select-model',
      code: 'yes_or_no',
      checkDefault: false,
      clearable: true,
    },
    {
      label: '是否暂估',
      value: 'isEstimationStockBusiness',
      type: 'select-model',
      code: 'yes_or_no',
      checkDefault: false,
      clearable: true,
    },
    {
      label: '入库批次号',
      value: 'storeBatchNumber',
      type: 'input',
    },
  ],
  rules: {
    depotName: [{ required: true, message: '请选择仓库', trigger: 'change' }],
  },
  labelWidth: '100px',
})
const useDepotInfo = ref({
  visible: false,
  query: {
    status: 1,
  },
})
const supplierInfo = ref({
  visible: false,
  query: {},
})
//选择产品相关
const productInfo = ref({
  visible: false,
  query: {},
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    emits('update:visible', val) // 更新父组件visible
  },
})

onMounted(() => {
  if (props.rowData && JSON.stringify(props.rowData) !== '{}') {
    getDetails(props.rowData.id)
  }
})

function getDetails(id) {
  getDepotProductForbiddenConfigById(id).then((res) => {
    if (res.success) {
      formInfo.value.data = res.data
      if (res.data.price === -2) {
        formInfo.value.data.price = ''
      }
    }
  })
}
function save() {
  proxy.$fn.checkForm([formInfo.value.ref]).then(() => {
    const api = formInfo.value.data.id
      ? putDepotProductForbiddenConfig
      : postDepotProductForbiddenConfig
    api(formInfo.value.data).then((resp) => {
      if (resp && resp.success) {
        showDialog.value = false
        emits('returnModify')
      }
    })
  })
}
function checkDepotName() {
  useDepotInfo.value.visible = true
}
function openSupplierWindow() {
  //供应商
  supplierInfo.value.visible = true
}
function changeProduct() {
  productInfo.value.visible = true
}
function callbackUseDepot(data) {
  if (data && data.id) {
    formInfo.value.data.depotName = data.name
    formInfo.value.data.depotId = data.id
  } else {
    formInfo.value.data.depotName = ''
    formInfo.value.data.depotId = ''
  }
}
function selectSupplierCallback(row) {
  if (row && row.supplierId) {
    formInfo.value.data['supplierName'] = row.supplierName
    formInfo.value.data['supplierId'] = row.supplierId
  } else {
    formInfo.value.data['supplierName'] = ''
    formInfo.value.data['supplierId'] = ''
  }
}
function selectProduct(row) {
  console.log(row)
  if (row && row.productId) {
    formInfo.value.data['productName'] = row.commonName
    formInfo.value.data['productId'] = row.productId
  } else {
    formInfo.value.data['productName'] = ''
    formInfo.value.data['productId'] = ''
  }
}
</script>

<style scoped lang="scss"></style>
